<template>
  <div>
    <div style="width: 50%;height:70vh;float: left">
      <el-form :inline="true">
        <el-form-item label="时间">
          <div class="block">
            <el-date-picker
              v-model="value6"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="产品类别">
          <el-input></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="query">查询</el-button>
        </el-form-item>
      </el-form>

      <ve-map width="100%" height="70vh" :data="chartData" :settings="chartSettings" :events="chartEvents" :loading="isLoading"></ve-map>
    </div>
    <div style="width: 50%;height:70vh;margin-left: 50%">
      <el-form>
        <el-form-item>
          <el-table
            border
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName">
            <el-table-column
              prop="name"
              label="企业名称">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址">
            </el-table-column>
            <el-table-column
              prop="cc"
              label="抽查批次">
            </el-table-column>
            <el-table-column
              prop="hg"
              label="抽查批次">
            </el-table-column>
            <el-table-column
              prop="bhg"
              label="不合格批次">
            </el-table-column>
            <el-table-column
              prop="hgl"
              label="抽查合格率">
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-button @click="message()" style="float: right" type="primary">导出excel</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
<script>
  import 'v-charts/lib/style.css'
  export default {
    data () {
      this.chartSettings = {
        position: 'province/sichuan',
        // selectData: true,
        selectedMode: 'single'
      }
      this.chartEvents = {
        click: (v) => {
          this.tableData = this.mapData[v.dataIndex]
        }
      }

      return {
        isLoading:false,
        value6: '',
        mapData: [
          [
            {'name': 'a企业', 'address': 152, 'cc': 152, 'hg': 152, 'bhg': 152, 'hgl': 70 / 100},
            {'name': 'a企业', 'address': 335, 'cc': 152, 'hg': 152, 'bhg': 152, 'hgl': 60 / 100},
            {'name': 'a企业', 'address': 125, 'cc': 152, 'hg': 152, 'bhg': 152, 'hgl': 50 / 100},
            {'name': 'a企业', 'address': 752, 'cc': 152, 'hg': 152, 'bhg': 152, 'hgl': 40 / 100},
            {'name': 'b企业', 'address': 752, 'cc': 152, 'hg': 152, 'bhg': 152, 'hgl': 20 / 100}
          ],
          [
            {'name': 'b企业', 'address': 752, 'cc': 152, 'hg': 152, 'bhg': 152, 'hgl': 20 / 100},
            {'name': 'b企业', 'address': 752, 'cc': 152, 'hg': 152, 'bhg': 152, 'hgl': 20 / 100},
            {'name': 'b企业', 'address': 752, 'cc': 152, 'hg': 152, 'bhg': 152, 'hgl': 20 / 100}
          ],
          [
            {'name': 'c企业', 'address': 752, 'cc': 152, 'hg': 152, 'bhg': 152, 'hgl': 20 / 100},
            {'name': 'c企业', 'address': 752, 'cc': 152, 'hg': 152, 'bhg': 152, 'hgl': 20 / 100},
            {'name': 'c企业', 'address': 752, 'cc': 152, 'hg': 152, 'bhg': 152, 'hgl': 20 / 100},
            {'name': 'c企业', 'address': 752, 'cc': 152, 'hg': 152, 'bhg': 152, 'hgl': 20 / 100}
          ],
          [
            {'name': 'd企业', 'address': 752, 'cc': 152, 'hg': 152, 'bhg': 152, 'hgl': 20 / 100},
            {'name': 'd企业', 'address': 752, 'cc': 152, 'hg': 152, 'bhg': 152, 'hgl': 20 / 100}
          ],
          [
            {'name': 'e企业', 'address': 752, 'cc': 152, 'hg': 152, 'bhg': 152, 'hgl': 20 / 100},
            {'name': 'e企业', 'address': 752, 'cc': 152, 'hg': 152, 'bhg': 152, 'hgl': 20 / 100}
          ]
        ],
        tableData: [],
        chartData: {
          columns: ['位置', '查企业数', '抽查批次', '合格批次', '不合格批次', '抽查合格率'],
          rows: [
            {'位置': '阿坝藏族羌族自治州', '查企业数': 152, '抽查批次': 152, '合格批次': 152, '不合格批次': 152, '抽查合格率': 80 / 100},
            {'位置': '凉山彝族自治州', '查企业数': 335, '抽查批次': 152, '合格批次': 152, '不合格批次': 152, '抽查合格率': 80 / 100},
            {'位置': '乐山市', '查企业数': 125, '抽查批次': 152, '合格批次': 152, '不合格批次': 152, '抽查合格率': 80 / 100},
            {'位置': '甘孜藏族自治州', '查企业数': 752, '抽查批次': 152, '合格批次': 152, '不合格批次': 152, '抽查合格率': 80 / 100},
            {'位置': '成都市', '查企业数': 752, '抽查批次': 152, '合格批次': 152, '不合格批次': 152, '抽查合格率': 80 / 100}
          ]
        }
      }
    },
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      message() {
        this.$notify({
          message: '导出ecxel成功',
          type: 'success'
        });
      },
      query(){
        this.isLoading = true
        let that = this
        setTimeout(function () {
          that.isLoading = false
        },2000)
      }
    },
  }
</script>
